<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li><input type="checkbox" /> 音乐1 </li>
        <li><input type="checkbox" /> 音乐2 </li>
        <li><input type="checkbox" /> 音乐3 </li>
    </ul>
    全选： <input class="checkall" type="checkbox">
    <script>
        var arr = [{
            ischecked: false,  // 如果 是true 那么 是勾选状态 ，否则是不勾选状态
            musicName: "音乐1"
        }, {
            ischecked: false,
            musicName: "音乐2"
        }, {
            ischecked: false,
            musicName: "音乐3"
        }, {
            ischecked: false,
            musicName: "音乐4"
        }, {
            ischecked: false,
            musicName: "音乐5"
        }]


        // 一、根据arr数据渲染视图
        var ulEle = document.querySelector("ul");
        function renderDom(arr) {
            ulEle.innerHTML = "";
            arr.forEach(function (item, key) {
                var liEle = document.createElement("li");
                if (item.ischecked) {
                    // item里的ischecked 是true
                    liEle.innerHTML = `<input type="checkbox" checked /> ${item.musicName}`;
                } else {
                    // item里的ischecked 是false
                    liEle.innerHTML = `<input type="checkbox" />  ${item.musicName}`;
                }
                liEle.onclick = function (e) {
                    // console.log(e.target);
                    if (e.target.nodeName === "INPUT") {
                        // console.log("点击了checkbox")
                        console.log(e.target.checked);  // 是否被勾选的状态，如果被勾选了那么是true 否则就是false
                        // 把当前数据的ischecked修改成和视图一致 ；
                        // console.log(arr);
                        // console.log(key);
                        arr[key].ischecked = e.target.checked;
                        console.log(arr);
                        // 可以通过数据来判断是否需要全选；
                        var res = arr.every(function (item) {
                            return item.ischecked;
                        })
                        // var res = arr.every(item=>item.ischecked);
                        console.log("最终的结果是", res)
                        document.querySelector(".checkall").checked = res;
                    }
                }
                ulEle.appendChild(liEle);
            })
        }
        renderDom(arr);


    </script>
</body>

</html>